<script lang="ts">
import { shuffle } from "lodash";
export default {
  name: "Pioneers",
};
</script>
<script setup lang="ts">
import PioneerItem from "./pioneer-item.vue";
// import pioneersData from "./config.json";
import pioneersData from "./config.ts"

</script>

<template>
  <div
    class="vast-pioneers box-border relative flex justify-center items-center flex-col"
  >
    <div class="w-full h-full flex px-1">
      <div class="home-container mt-2 mb-2">
        <router-link class="icon-btn" :to="'/'">
          <div class="iconfont icon-home-filling" />
        </router-link>
      </div>
      <div class="content flex-auto flex gap-1">
        <PioneerItem v-for="pioneer,i in shuffle(pioneersData)" :pioneer="pioneer" :i="i" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.vast-pioneers {
  box-sizing: border-box;
  backdrop-filter: saturate(50%) blur(6px);
  border-top: var(--vast-default-border);
  .home-container {
    border-right: var(--vast-default-border);
  }
}
</style>
